<!DOCTYPE html>
<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
    <!-- Styles -->
    
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/bootstrap.css'}">
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
        #{get 'moreStyles' /}
        
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.ico'}">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    <!-- JS Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    
   
    <script src="@{'/public/javascripts/bootstrap-modal.js'}"></script>
    <script src="@{'/public/javascripts/bootstrap-alerts.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-twipsy.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-popover.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-dropdown.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-scrollspy.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-tabs.js'}"></script>
           <script src="@{'/public/javascripts/bootstrap-buttons.js'}"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
      		$('#topbar').dropdown();
      		
		});
    </script>
    
    #{get 'moreScripts' /}

    </head>
    <body>
    
   
    <div class="topbar" data-dropdown="dropdown">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">eazyBookmark</a>
          <ul class="nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="/about.html">About</a></li>
            <li><a href="/help.html">Help</a></li>
            <li><a href="/tools.html">Tools</a></li>
          </ul>
          <ul class="nav secondary-nav">
          	#{if user}
				<li class="dropdown">
              		<a href="#" class="dropdown-toggle">${user}</a>
              		<ul class="dropdown-menu">
                		<li><a href="#">Secondary link</a></li>
                		<li class="divider"></li>
                		<li><a href="@{Application.logout()}">Logout</a></li>
              		</ul>
            	</li>
			#{/if}
            #{else}
				<li><a href="@{Application.login()}">Login</a></li>			
			#{/else}
          </ul>
          
         
        </div>
      </div>
    </div>
    
   
     <div class="container">
		
		
		
      <div class="content">
		
        #{doLayout /}
        
        
      </div>

      <footer>
        <p> Copyright &copy; ${new Date().format('yyyy')}
 		<a href="http://eazybookmark.appspot.com">eazyBookmark</a> </p>
      </footer>

    </div> <!-- /container -->
    

    </body>
</html>